<script>
  import { moment } from 'istrong-timeutil';
  import { get } from 'istrong-axiosmodel';
  import { orderBy, isEmpty } from 'lodash';
  import { vList } from 'istrong-mvue-common-ui';
  import renderChart from '../../libs/chart/windChart';

  export default {
    name: 'windChart',
    data() {
      return {
        id: '',
        name: '',
        beginTime: moment(),
        endTime: moment(),
        chartData: { data: [] },
        listData: [],
        listField: [
          {
            fieldLabel: '时间',
            fieldName: 'time',
            fieldType: 'Date',
            format: 'MM-DD HH时',
            headerClass: 'chartViewer-WindList-Time',
            contentClass: 'chartViewer-WindList-Time'
          },
          {
            fieldLabel: '风速<span class="listViewer-header-unit">(m/s)</span>',
            fieldName: 'wind_speed',
            fieldType: 'Number',
            fixed: 1,
            defaultLabel: '-',
            headerClass: 'chartViewer-WindList-Speed',
            contentClass: 'chartViewer-WindList-Speed'
          },
          {
            fieldLabel: '风力等级',
            fieldName: 'wind_power',
            fieldType: 'String',
            defaultLabel: '-',
            headerClass: 'chartViewer-WindList-Power',
            contentClass: 'chartViewer-WindList-Power'
          },
          {
            fieldLabel: '风向',
            fieldName: 'wind_dir_desc',
            fieldType: 'String',
            defaultLabel: '-',
            headerClass: 'chartViewer-WindList-Dir',
            contentClass: 'chartViewer-WindList-Dir'
          }
        ],
        routerParams: {}
      }
    },
    components: {
      'vc-List': vList
    },
    methods: {
      getChartData() {
        get('wind.details', {
          windChart: {
            _id: this.id,
            time: ['[', moment(this.beginTime).format('YYYY-MM-DDTHH:mm:00'), ',', moment(this.endTime).format('YYYY-MM-DDTHH:mm:00'), ']'].join('')
          }
        }).then(result => {
          if (isEmpty(result)) {
            return;
          }
          let data = result[0];
          this.listData = orderBy(data.data, ['time'], ['desc']);
          this.chartData = data;
          this.redrawChart();
        });
      },
      redrawChart() {
        renderChart(this._chart, 'chartViewer-WindChart', this.chartData, this.beginTime, this.endTime)
      },
      routerToMap() {
        let query = {};
        let {collisionZoom} = this.routerParams
        if (collisionZoom) {
          query.collisionZoom = collisionZoom;
        }
        this.$router.push({
          name: 'wind/main',
          params: {
            showType: 'map',
            id: this.id
          },
          query: query
        });
      }
    },
    computed: {
      header_BeginTime: function () {
        return moment(this.beginTime).format('DD日HH时mm分');
      },
      header_EndTime: function () {
        return moment(this.endTime).format('DD日HH时mm分');
      },
      currentDir: function () {
        return this.listData.length > 0 ? this.listData[0].wind_dir_desc : '';
      },
      currentSpeed: function () {
        return this.listData.length > 0 ? this.listData[0].wind_speed + 'm/s' : '';
      },
      currentPower: function () {
        return this.listData.length > 0 ? this.listData[0].wind_power : '';
      },
      currentDataTime: function () {
        return this.listData.length > 0 ? moment(this.listData[0].time).format('YYYY-MM-DD HH时') : '';
      }
    },
    mounted() {
    },
    created() {
    },
    beforeDestroy() {
    },
    beforeRouteEnter(to, from, next) {
      let { id, name, beginTime, endTime } = to.query;
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.id = id;
        vm.name = name;
        vm.beginTime = beginTime;
        vm.endTime = endTime;
        vm.routerParams = to.params;
        vm.getChartData();
      });
    }
  }
</script>
<template>
  <div id="chartViewer">
    <div class="appHeader-listViewer">
      <div class="appHeader-listViewer-Time">{{header_BeginTime}} 至 {{header_EndTime}}</div>
      <div class="btChangeRouterMap" v-on:click="routerToMap">
        <span class="ion-ios-location"></span>
      </div>
    </div>
    <div class="div-chart-hr"></div>
    <div class="chartViewer-Chart-Page">
      <div class="chartViewer-Chart">
        <div class="chartViewer-Chart-Name">{{name}}</div>
        <div id="chartViewer-WindChart"></div>
        <div class="chartViewer-ChartTip">
          <div>
            <div class="chartViewer-ChartTip-Left">
              <span>最新风向:</span>
              <span>{{currentDir}}</span>
            </div>
            <div class="chartViewer-ChartTip-Right">
              <span>最新风速:</span><span>{{currentSpeed}}</span>
            </div>
          </div>
          <div>
            <div class="chartViewer-ChartTip-Left">
              <span>最新风力:</span>
              <span>{{currentPower}}</span>
            </div>
            <div class="chartViewer-ChartTip-Right">
              <span>时　　间:</span><span>{{currentDataTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="div-chart-hr"></div>
      <div class="chartViewer-WindList">
        <vc-List :data="listData" :fields="listField" class="chartViewer-List"></vc-List>
      </div>
    </div>
  </div>
</template>
<style>
#chartViewer-WindChart{
  width: 100%;
  height: 210px;
  background-color: #fff;
}

.chartViewer-WindList{
  width: 100%;
  font-size: 14px;
}
.chartViewer-WindList>div{
  margin: 0px 15px;
}

.chartViewer-WindList-Time{
  text-align: left;
  width: 41%;
  min-width: 78px;
  white-space: nowrap;
}
.chartViewer-WindList-Speed,.chartViewer-WindList-Power{
  text-align: right;
  min-width: 65px;
  padding-right: 15px;
  width: 22%;
}
.chartViewer-WindList-Dir{
  text-align: center;
  min-width: 45px;
  width: 15%;
}

@media all {
  .chartViewer-WindList-Time{
    width: 38%;
  }
  .chartViewer-WindList-Dir{
    width: 18%;
  }
}
@media (max-width: 320px) {
  .chartViewer-WindList-Time{
    width: 41%;
  }
  .chartViewer-WindList-Dir{
    width: 15%;
  }
}

</style>